<template>
	<div class="index">
		<!-- 首页 -->
		<!-- 第四楼 -->
		<div class="menu">
			<div class="menu0">
				<div class="menu1">
					<div class="menu11">
						<p><router-link href="/skincare">护肤</router-link></p>
						<a href="#">护手</a>
						<a href="#">化妆水</a>
						<a href="#">面膜</a>
						<a href="#">乳液</a>
						<a href="#">精华</a>
						<a href="#">防晒</a>
						<div class="menu111">
							<div>
								<p><a href="#">护肤 Skin care more</a></p>
								<hr>
								<a href="#">卸妆品</a>
								<a href="#">面霜</a>
								<a href="#">唇部护理</a>
								<a href="#">眼部护理</a>
								<a href="#">特殊护理</a>
								<a href="#">精油</a>
								<a href="#">眼唇霜</a>
								<a href="#">肌底液</a>
								<a href="#">原液</a>
								<a href="#">面部按摩品</a>
								<a href="#">护肤套装</a>
							</div>
						</div>
					</div>
					<div class="menu12">
						<p><a href="#">彩妆</a></p>
						<a href="#">粉底</a>
						<a href="#">口红</a>
						<a href="#">腮红</a>
						<a href="#">眼线笔</a>
						<a href="#">眼影</a>
						<a href="#">眉笔彩妆</a>

						<div class="menu122">
							<div>
								<p><a href="#">彩妆 Makeup more</a></p>
								<hr>
								<a href="#">散粉/蜜粉</a>
								<a href="#">睫毛膏</a>
								<a href="#">化妆工具</a>
								<a href="#">妆前乳/霜</a>
								<a href="#">BB霜</a>
								<a href="#">粉饼</a>
								<a href="#">CC霜</a>
								<a href="#">遮瑕</a>
								<a href="#">彩妆组合</a>

								<a href="#">睫毛增长液</a>
							</div>
						</div>
					</div>
					<div class="menu13">
						<p><a href="#">美发</a></p>
						<a href="#">洗发水</a>
						<a href="#">染发</a>
						<a href="#">烫发</a>
						<a href="#">发油</a>
						<a href="#">护发素</a>
						<a href="#">定型水</a>


						<div class="menu133">
							<div>
								<p><a href="#">美发 Makeup more</a></p>
								<hr>
								<a href="#">洗发水</a>
								<a href="#">染发</a>
								<a href="#">烫发</a>
								<a href="#">发油</a>
								<a href="#">护发素</a>
								<a href="#">定型水</a>
							</div>
						</div>
					</div>
					<div class="menu14">
						<p><a href="#">美体</a></p>
						<a href="#">瘦身</a>
						<a href="#">美体</a>
						<a href="#">丰胸</a>
						<a href="#">乳液</a>
						<a href="#">精华</a>
						<a href="#">防晒</a>


						<div class="menu144">
							<div>
								<p><a href="#">美体 Skin care more</a></p>
								<hr>
								<a href="#">瘦身</a>
								<a href="#">美体</a>
								<a href="#">丰胸</a>
							</div>
						</div>
					</div>
				</div>
				<!-- 轮播图开始 -->
				<div class="menu2">
					<swiper @mouseover.native="stopSwiper" @mouseout.native="startSwiper" ref="swiper"
						class="swiper" :options="swiperOptions">
						<swiper-slide>
							<img src='../assets/pic/03.jpg' alt="" />
						</swiper-slide>
                        <swiper-slide>
                        	<img src='../assets/pic/04.jpg' alt="" />
                        </swiper-slide>
						<swiper-slide>
							<img src='../assets/pic/03.jpg' alt="" />
						</swiper-slide>
						<swiper-slide>
							<img src='../assets/pic/04.jpg' alt="" />
						</swiper-slide>
						<!-- 分页器: 必须放入对应插槽中 -->
						<div class="swiper-pagination" slot="pagination"></div>
						<!-- 左右箭头: 必须放在对应的插槽中 -->
						<div class="swiper-button-prev" slot="button-prev"></div>
						<div class="swiper-button-next" slot="button-next"></div>
					</swiper>
					<div class="menu21"><a href="#">资生堂护肤品有哪些 不同年龄段怎么护肤</a></div>
				</div>
				
				<!-- 轮播图结束 -->
				
				<div class="menu3">
					<h3>qqhzp推荐</h3>
					<div class="menu31">
						<img src="../assets/pic/05.jpg">
						<div><a href="#">卸妆水能卸掉烤过的美甲吗</a></div>
					</div>
					<div class="menu31">
						<img src="../assets/pic/06.jpg">
						<div><a href="#">如何判断防晒霜成膜 防晒霜成膜后会被蹭掉吗</a> </div>
					</div>
					<div class="menu31">
						<img src="../assets/pic/07.png">
						<div><a href="#">雅漾活泉修复霜成分是什么？雅漾修复霜可以天天用吗</a></div>
					</div>
					<div class="menu31">
						<img src="../assets/pic/08.jpg">
						<div><a href="#">rnapower与skinpower的区别 SK-II skin power系列的优势</a></div>
					</div>
					<div class="menu31">
						<img src="../assets/pic/09.jpg">
						<div><a href="#">修正淡斑霜是修正药业出品吗</a></div>
					</div>
				</div>
				
			</div>
		</div>

		<!-- 第五楼 -->
		<div class="item">
			<div class="item1">
				<div class="item11">
					<a href="#">护肤</a>
				</div>
				<div class="item12">
					<a href="#">面膜</a>
					<span>|</span>
					<a href="#">祛斑</a>
					<span>|</span>
					<a href="#">粉刺</a>
					<span>|</span>
					<a href="#">保湿补水</a>
					<span>|</span>
					<a href="#">去黑头</a>
					<span>|</span>
					<a href="#">防晒</a>
					<span>|</span>
					<a href="#">抗皱</a>
					<span>|</span>
					<a href="#">美白</a>
					<span>|</span>
				</div>
			</div>
		</div>
		<!-- 第六楼 -->
		<div class="liu">
			<div class="liu1">
				<img src='../assets/pic/10.jpg'>
			</div>
			<div class="liu2">
				<div class="liu21"><img src="../assets/pic/11.jpg"></div>
				<div class="liu22">
					<a href="#">为什么淡斑霜会有依赖性</a><br>
					<span>一般祛斑霜都会有金属成分,比如含铅，汞等化学金属。这...</span>
					<hr>
					<a href="#">修正淡斑霜和祛斑霜有什么区别</a><br>
					<span>淡斑霜和祛斑霜可以去除脸上的色斑，只是他们也是...</span>
					<hr>
				</div>
			</div>
		</div>
		<!-- 第七楼 -->
		<div class="title">
			<div class="title1"><a href="#">彩妆</a></div>
			<div class="title2"><a href="#">美甲</a></div>
		</div>
		<!-- 第八楼 -->
		<div class="pic">
			<div class="pic1">
				<div><img src='../assets/pic/16.gif'></div>
				<div><a href="#">谢馥春眼影怎么样 谢馥春国妆九</a></div>
				<div>
					<a href="#">植村秀眉笔真假 植村秀眉笔怎么削</a><br>
					<a href="#">戴眼镜怎么化眼妆 手把手教你放大双眼</a>
				</div>
			</div>
			<div class="pic2">
				<div><img src='../assets/pic/17.gif'></div>
				<div><a href="#">眼影刷怎么用两头 眼影刷你都用</a></div>
				<div>
					<a href="#">化妆品创业优选项目 携手精妆联华共创财</a><br>
					<a href="#">把握美丽商机拥抱财富未来 精妆联华让创</a>
				</div>
			</div>
			<div class="pic3">
				<div><img src='../assets/pic/18.gif'></div>
				<div><a href="#">卸妆水保质期多久</a></div>
				<div>
					<a href="#">实地考察亲自验证 花漾丽人化妆品超市真</a><br>
					<a href="#">医药人的春天</a>
				</div>
			</div>
			<div class="pic4">
				<div><img src='../assets/pic/05.jpg'></div>
				<div><a href="#">卸甲水能卸掉烤过的美甲吗</a></div>
				<div>
					<a href="#">卸妆水卸甲油胶需要多长时间</a><br>
					<a href="#">卸甲水能卸掉烤过的美甲吗</a>
				</div>
			</div>
		</div>
		<!-- 第九楼 -->
		<div class="hair">
			<div class="hair1"><a href="#">美发</a></div>
			<div class="hair2"><a href="#">洗发水</a></div>
			<div class="hair3"><a href="#">美体</a></div>
		</div>
		<!-- 第十楼 -->
		<div class="over">
			<div class="over1">
				<img src='../assets/pic/19.gif'>
				<div>
					<a href="#">头皮发痒，Dr.FORHAIR洗发水专业去角质祛污</a>
					<a href="#">头皮发痒，Dr.FORHAIR洗发水专业去角质祛污垢止瘙痒玄彬粉</a>
					<a href="#">最爱</a>
				</div>
				<hr class="x">
			</div>
			<div class="over2">
				<img src='../assets/pic/20.jpg'>
				<div><a href="#">蝴蝶烫和纹理烫区别</a></div>
				<div><a href="#">护发</a></div>
				<img src='../assets/pic/21.jpg'>
				<div><a href="#">漂发可以不漂发根么</a></div>
			</div>
			<div class="over3">
				<div>
					<img src='../assets/pic/22.gif'>
					<a href="#">腰上的赘肉怎么减最有效</a>
					<hr>
				</div>
				<div>
					<img src='../assets/pic/23.gif'>
					<a href="#">怎么丰胸效果好？丰胸秘籍人人</a>
					<hr>
				</div>
				<div>
					<img src='../assets/pic/24.gif'>
					<a href="#">产后瘦身衣 产后瘦身有诀窍</a>
					<hr>
				</div>
				<div>
					<img src='../assets/pic/25.gif'>
					<a href="#">剖腹产产后瘦身 剖腹产产后减肥方</a>
					<hr>
				</div>
				<hr class="x">
			</div>
		</div>
		<!-- 第十一楼 -->
		<div class="foot">
			<div class="foot1">
				<span>护肤</span>
				<ul>
					<li>
						<a href="#">面膜</a>
						<a href="#">祛斑</a>
						<a href="#">粉刺</a>
						<a href="#">保湿补水</a>
						<a href="#">去黑头</a>
						<a href="#">防晒</a>
						<a href="#">抗皱</a>
						<a href="#">美白</a>
					</li>
				</ul>
			</div>
			<div class="foot2">
				<span>彩妆</span>
				<ul>
					<li>
						<a href="#">润唇膏</a>
						<a href="#">卸妆</a>
						<a href="#">化妆步骤</a>
						<a href="#">化妆工具</a>
						<a href="#">妆前乳</a>
						<a href="#">化妆棉</a>
						<a href="#">怎样化妆</a>
						<a href="#">化妆刷</a>
					</li>
				</ul>
			</div>
			<div class="foot3">
				<span>护发</span>
				<ul>
					<li>
						<a href="#">发膜</a>
						<a href="#">发用香氛</a>
						<a href="#">吹风机</a>
						<a href="#">护发产品</a>
						<a href="#">染发产品</a>
						<a href="#">洗发产品</a>
						<a href="#">头发护理产品</a>
					</li>
				</ul>
			</div>
			<div class="foot4">
				<span>美体</span>
				<ul>
					<li>
						<a href="#">丰胸产品</a>
						<a href="#">瘦身产品</a>
						<a href="#">身体护理产品</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
     data() {
         return {
           data: null, // 把请求数据存储到本地
           // swiper配置项:
           swiperOptions: {
             //效果,特效  默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）
             effect: "cube",
             // 无限循环
             loop: true,
             // 自动滚动
             // autoplay: true, //默认的效果
             // 个性化配置
             autoplay: {
               delay: 2000, //间隔时长, 单位毫秒
               disableOnInteraction: false, //用户操作swiper后是否禁用自动滚动
             },
             // 分页器: 官方的API文档是 HTML版本的, 与 vue 中用法有细微差异
             pagination: {
               el: ".swiper-pagination",
               clickable: true, //响应点击事件
             },
             navigation: {
               nextEl: ".swiper-button-next",
               prevEl: ".swiper-button-prev",
             },
           },
         };
       },
	   
	   methods: {
	       // 鼠标进入时
	       stopSwiper() {
	         // console.log("我进来了!");
	         console.log(this.$refs.swiper);
	         // 中国.北京.丰台.大红门.xxx
	         this.$refs.swiper.$swiper.autoplay.stop();
	       },
	       // 鼠标离开时
	       startSwiper() {
	         // console.log("我出来了!");
	         this.$refs.swiper.$swiper.autoplay.start();
	       },
		   }
	}
</script>

<style src="../assets/css/index.css"></style>
<style scoped>
.swiper-button-prev{
	color: #fff;
}
.swiper-button-next{
	color:#fff;
}
</style>
